<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>angular-工资计算器</title>
        <link rel="stylesheet" href="font-Awesome/css/font-awesome.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body ng-app="myApp" ng-init="title='工资计算器';pageIndex=1">
        <header>{{title}}</header>
		<div class="page" ng-show="pageIndex==1" ng-controller="calcCtrl">
			<form name="form" ng-submit="calc()" class="gz">
				<input type="number" ng-change="showResult=false;" ng-model="jiben" min="1800" name="jiben" placeholder="您的工资\不能低于最低工资标准" required title="请输入一个不小于1800的数字"> <br>
				<input type="number" ng-change="showResult=false;" ng-model="jixiao" name="jixiao" placeholder="您的绩效工资"> <br>
				<input type="number" ng-change="showResult=false;" ng-model="jiangjin" name="jiangjin" placeholder="您的奖金"> <br>
				<input type="submit"  value="计算">
			</form>
			<section ng-show="showResult">
				<dl>
					<dt>工资总额</dt>
					<dd>{{result.total | currency:'￥'}}</dd>
				</dl>
				<div class="hr"></div>
				<dl class="zhichu">
					<dt>养老 {{settings.shebao.yanglao | percent:2}}</dt>
					<dd>{{result.shebao.yanglao | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>医疗 {{settings.shebao.yiliao | percent:2}}</dt>
					<dd>{{result.shebao.yiliao | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>失业 {{settings.shebao.shiye | percent:2}}</dt>
					<dd>{{result.shebao.shiye | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>工伤 {{settings.shebao.gongshang | percent:2}}</dt>
					<dd>{{result.shebao.gongshang | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>生育 {{settings.shebao.shengyu | percent:2}}</dt>
					<dd>{{result.shebao.shengyu | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>公积金 {{settings.shebao.gongjijin | percent:2}}</dt>
					<dd>{{result.shebao.gongjijin | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>社保统筹</dt>
					<dd>{{result.shebao.tongchou | currency:'￥'}}</dd>
				</dl>
				<div class="hr"></div>
				<dl>
					<dt>计税工资</dt>
					<dd>{{result.jishui | currency:'￥'}}</dd>
				</dl>
				<div></div>
				<dl class="zhichu">
					<dt>个人所得税</dt>
					<dd>{{result.shui | currency:'￥'}}</dd>
				</dl>
				<div class="hr"></div>
				<dl class="result">
					<dt>实发工资</dt>
					<dd>{{result.shifa | currency:'￥'}}</dd>
				</dl>
				<div></div>
			</section>
		</div>
		
		<div class="page" ng-show="pageIndex==2" ng-controller="setCtrl">
			<form novalidate>
				<ul class="list">
					<li>
						<span>养老费率</span>
						<input type="number" ng-model="shebao.yanglao" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入养老费率">
					</li>
					<li>
						<span>医疗费率</span>
						<input type="number" ng-model="shebao.yiliao" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入医疗费率">
					</li>
					<li>
						<span>失业费率</span>
						<input type="number" ng-model="shebao.shiye" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入失业费率">
					</li>
					<li>
						<span>工伤费率</span>
						<input type="number" ng-model="shebao.gongshang" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入工伤费率">
					</li>
					<li>
						<span>生育费率</span>
						<input type="number" ng-model="shebao.shengyu" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入生育费率">
					</li>
					<li>
						<span>公积金费率</span>
						<input type="number" ng-model="shebao.gongjijin" zy-percent ng-change="rootBroadcastChange()" placeholder="请输入公积金费率">
					</li>
					<li>
						<span>社保统筹</span>
						<input type="number" ng-model="shebao.tongchou" ng-change="rootBroadcastChange()" placeholder="请输入社保统筹">
					</li>
				</ul>
			</form>
		</div>
		<div class="page" ng-show="pageIndex==3" ng-controller="aboutCtrl">
			<div class="panel">
				<h3>个人所得税税率表</h3>
				<hr>
				<p>计税工资（减去各项扣款后）减3500后</p>
				<p>不超过1500元的税率3%</p>
				<p>1500元至4500元的部分税率10%，速算扣除105</p>
				<p>4500元至9000元的部分税率20%，速算扣除555</p>
				<p>9000元至35000元的部分税率25%，速算扣除1005</p>
			</div>
		</div>
        <footer>
            <a ng-click="title='工资计算器';pageIndex=1;" ng-class="pageIndex==1? 'selected':''">
                <i class="fa fa-calculator fa-lg"></i> <br>
                <span>计算</span>
            </a>
            <a ng-click="title='设置';pageIndex=2;" ng-class="pageIndex==2? 'selected':''">
                <i class="fa fa-gear fa-lg"></i> <br>
                <span>设置</span>
            </a>
            <a ng-click="title='关于';pageIndex=3;" ng-class="pageIndex==3? 'selected':''">
                <i class="fa fa-server fa-lg"></i> <br>
                <span>关于</span>
            </a>
        </footer>
    </body>
</html>
<script src="angular.js"></script>
<script src="index.js"></script>
<!--
	fontawesome 来源 http://fontawesome.io/
	大家以前用的是 http://www.bootcss.com/p/font-awesome/

	用到的新知识点：2) 3)解释见小例子
	
	1）ng-class 添加样式类
	
	2）作用域的$broadcast方法
		该方法的作用类似触发事件，上级作用域调用$broadcast方法触发的事件，下级作用域都可以接收到；
	该例子中，当设置页面的缴纳比例发生变化时,通过$rootScope调用$broadcast方法触发事件，计算页面的$scope接收到事件后
	重新计算；
	3）输入框的值 ======作用域的值  的内部过程

	输入框的值经过 解析、同步验证、异步验证，全部通过才会写入作用域
	作用域的值经过 格式化、同步验证、异步验证，全部通过才会写入输入框



	分析过程：
	从效果上看，该项目分为三页；
	1)第一步先实现页面切换，使用了ng-click,ng-show,ng-class,ng-init指令
	三页的关系：
	
	计算页面需要使用设置页面的数据；关于页面与其他两个页面无关；
	2)遵循从易到难，逻辑顺序；决定先实现关于页面，然后设置页面，最后计算页面；
	
	设置页面的数据在计算页面要使用;
	如果两页共用一个controller，也就是同一个scope，就可以直接使用；
	
	但是如果每一页都比较复杂，共用一个scope作用域，
	会造成scope中数据很多，不清晰，
	因此一般会每一页对应一个ng-controller;
	这样的话，就涉及到页面之间的传值问题；
	解决方案：angular中办法	
			1)把共享的数据放在共同的父作用域中
			2)把共享的数据放在服务中，需要的地方依赖注入；
		也可以使用本地存储保存共享数据；
	3)采用 服务 保存计算页面与设置页面的共享数据

	设置页面数据发生变化时，计算页面需要重新计算；
	也就是设置页面变化了，要通知计算页面；
	一个事物的变化要通知到外部，有两种实现方案：
		1）回调函数
		2）触发事件
	angular中提供了类似事件的机制去实现这种效果
	4)让$rootScope广播事件，计算页面$scope监听事件；

-->